<template>					
	<view class="cate-home">
		<mescroll-uni :ref="'mescrollRef'+i" bg-color="#ffffff" :top="384" @init="mescrollInit"
			@down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="content">
				<view style="margin: 0 30rpx">
					<cate-nav :list="navList"></cate-nav>
				</view>
				<view class="goods">
						<goods-list :list="goodsList" type="one"></goods-list>
						<view v-if="goodsList.length==0" style="text-align: center;padding: 200rpx 0rpx;">
							<image src="/static/image/order_null.png" class="goods-empty"></image>
							<view class="empty-tip">暂无商品~</view>
						</view>
				</view>
			</view>
		</mescroll-uni>
	</view>

</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {
		getGoodsList,
		getListByLevelOne,
		getIndexCategory
	} from "@/api/store"
	const app = getApp()
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		name: "cate-home",
		props: {
			// sc_id: {
			// 	type: Object,
			// 	default:''
			// 	// type: [Number, String]
			// },
			top: {
				type: [Number, String]
			},
			cate: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				shop_id:0,
				goodsList: [],
				navList: [],
				hotGoods: [],
				newGoods: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/bundle/static/image/goods_null.png',
						tip: '暂无商品~', // 提示
					}
				},
			};

		},
		created() {
			this.getIndexCategory()
			var page={
				num:1,
				size:10 
			}
			this.upCallback(page)
			// this.downCallback() 
		},
		computed: {
			positionTop() {
				return this.top
			}
		},
		methods: {
			// async downCallback() {
			// 	await this.getIndexCategory()
			// 	this.$refs.uWaterfall.clear && this.$refs.uWaterfall.clear();
			// 	this.mescroll.resetUpScroll();
			// },
			upCallback(page) {
				var that=this
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				that.shop_id = uni.getStorageSync('nearby_shops')
				console.log('that.shop_id',that.shop_id)
				getGoodsList({
					page_size: pageSize,
					page_no: pageNum,
					platform_cate_id: that.cate.id,
					shop_id:that.shop_id,
					coupon_id:that.sc_id,
				}).then(({
					data
				}) => {
					// that.goodsList=data.lists
					if (page.num == 1) that.goodsList = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					that.goodsList = that.goodsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				// }).catch(() => {
				// 	this.mescroll.endErr()
				})
			},
			async getIndexCategory() {
				const {
					id
				} = this.cate
				const {
					code,
					data
				} = await getIndexCategory({
					platform_category_id: id
				})
				if (code == 1) {
					const {level_two, category_hots, category_recommend} = data
					this.navList = level_two
					this.hotGoods = category_hots
					this.newGoods = category_recommend
				}
			}
		}
	}
</script>

<style lang="scss">
	.cate-home {
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;

		.contain {
			padding: 20rpx 30rpx 0;
		}

		.title-img {
			width: 100%;
			height: 120rpx;
		}

	}
	.goods-empty{
		width: 300rpx;
		height: 300rpx;
	}
	.empty-tip {
	    margin-top: 20rpx;
	    font-size: 26rpx;
	    color: grey;
	}
</style>
